<!--房产列表页-->
<template>
    <div>
        <div class="page-banner-section section">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1 class="page-banner-title">房产</h1>
                        <ul class="page-breadcrumb">
                            <li><a href="/">主页</a></li>
                            <li class="active">房产列表</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="property-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
            <div class="container">
                <div class="row">
                    <!--房产列表-->
                    <div class="col-lg-8 col-12 order-1 order-lg-2 mb-sm-50 mb-xs-50">
                        <!--房产列表-->
                        <div class="row">
                            <div class="property-item col-md-6 col-12 mb-40" v-for="data in list" :key="data.id">
                                <fc-property-inner :data="data"/>
                            </div>
                        </div>
                        <!--分页组件-->
                        <div class="row mt-20">
                            <div class="col">
                                <b-pagination
                                        prev-text="< 上一页"
                                        next-text="下一页 >"
                                        hide-goto-end-buttons pills
                                        size="lg" align="center"
                                        v-model="currentPage"
                                        :total-rows="rows"
                                        :per-page="pageSize"
                                ></b-pagination>
                            </div>
                        </div>
                    </div>
                    <!--搜索工具栏-->
                    <div class="col-lg-4 col-12 order-2 order-lg-1 pr-30 pr-sm-15 pr-xs-15">
                        <div class="sidebar">
                            <h4 class="sidebar-title"><span class="text">搜索房产</span><span class="shape"></span></h4>
                            <fc-search @searchResult="searchResult" :searchParams="searchParams"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FcSearch from '@/components/property/SearchPropertySmall.vue'
    import FcPropertyInner from '@/components/property/PropertyInner.vue'

    export default {
        data() {
            return {
                rows: 60,
                currentPage: 1,
                pageSize: 6,
                searchParams: {
                    url: '/test',
                    data: {
                        pageIndex: 0,
                        pageSize: 2,
                    }
                }
            }
        },
        components: {
            FcSearch, FcPropertyInner
        },
        props: {
            list: {
                type: Array,
                default() {
                    return [
                        {
                            id: 1,
                            pictureUrl: '/images/property/property-1.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '江南宅院',
                            price: 550,
                            leaseType: 1,
                            address: '锦江区东大街下东大街568号',
                            rentType: 1,
                            hot: 0,
                            special: 0,
                        },
                        {
                            id: 2,
                            pictureUrl: '/images/property/property-2.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '木马山别墅',
                            price: 2550,
                            leaseType: 1,
                            address: '城北大道450附22号',
                            rentType: 2,
                            hot: 1,
                            special: 0,
                        },
                        {
                            id: 3,
                            pictureUrl: '/images/property/property-3.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '皇家一号公寓',
                            price: 550,
                            leaseType: 1,
                            address: '锦江区福字街215号',
                            rentType: 1,
                            hot: 0,
                            special: 1,
                        },
                        {
                            id: 4,
                            pictureUrl: '/images/property/property-4.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '龙城一号别墅',
                            price: 550,
                            leaseType: 1,
                            address: '龙泉驿区南山大道333号附12号',
                            rentType: 1,
                            hot: 0,
                            special: 0,
                        },
                        {
                            id: 5,
                            pictureUrl: '/images/property/property-5.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '春天花园别墅',
                            price: 550,
                            leaseType: 1,
                            address: '金牛区琴台西路668号',
                            rentType: 2,
                            hot: 0,
                            special: 0,
                        },
                        {
                            id: 6,
                            pictureUrl: '/images/property/property-6.jpg',
                            square: 550,
                            roomNumber: 3,
                            bathroomNumber: 3,
                            garageNumber: 3,
                            title: '万科西山别墅',
                            price: 550,
                            leaseType: 1,
                            address: '高新区蜀都大道12号',
                            rentType: 1,
                            hot: 0,
                            special: 1,
                        }
                    ];
                }
            }
        },
        methods: {
            searchResult(data) {
                console.log(data);
            }
        }
    }
</script>

<style scoped>

</style>
